<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleUpdate" v-hasPermi="['lxy:policy:edit']">修改
        </el-button>
      </el-col>
    </el-row>

    <br><br>
    <el-form ref="form" :model="form" v-loading="loading">
      <el-descriptions class="margin-top" :column="2" :data="policyList" border>
        <!-- <template slot="extra">
          <el-button type="primary" size="small" @click="handleUpdate" v-hasPermi="['lxy:policy:edit']">修改</el-button>
        </template> -->
        <el-descriptions-item>
          <template slot="label">
            参与次数/年
          </template>
          <div style="width: 230px;">
            {{ form.joinYear }}年
          </div>

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            参与次数/次
          </template>
          <div style="width: 230px;">
            {{ form.joinNum }}次
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            省外/年
          </template>
          {{ form.outProvinceYear }}年
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            省外/次
          </template>
          {{ form.outProvinceNum }}次
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            国外/年
          </template>
          {{ form.abroadYear }}年
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            国外/次
          </template>
          {{ form.abroadNum }}次
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            入职时间限制
            <el-tooltip effect="dark" content="用于限制新入职老师报名，即入职多少年后可报名" placement="top">
              <i class="el-icon-question" style="margin-right: 10px;"></i>
            </el-tooltip>
          </template>

          {{ form.rzsjLimit }}年
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            政策实施时间
            <el-tooltip effect="dark" content="新政策实施时间，若选择重置后，设定失效" placement="top" style="margin-right: 10px;">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          {{ form.newCalculateYear }}年
        </el-descriptions-item>
      </el-descriptions>
    </el-form>


    <!-- <el-table v-loading="loading" :data="policyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="参与次数-年" align="center" prop="joinYear" />
      <el-table-column label="参与次数-次" align="center" prop="joinNum" />
      <el-table-column label="省外-年" align="center" prop="outProvinceYear" />
      <el-table-column label="省外-次" align="center" prop="outProvinceNum" />
      <el-table-column label="国外-年" align="center" prop="abroadYear" />
      <el-table-column label="国外-次" align="center" prop="abroadNum" />
      <el-table-column label="入职时间限制" align="center" prop="rzsjLimit" />
      <el-table-column label="政策实施时间" align="center" prop="newCalculateYear" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['lxy:policy:edit']">修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" /> -->

    <!-- 添加或修改政策对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <!-- 可参与次数 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="可参与次数 单位/年" prop="joinYear">
              <el-input v-model="form.joinYear" placeholder="可参与次数 单位/年" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可参与次数 单位/次" prop="joinNum">
              <el-input v-model="form.joinNum" placeholder="可参与次数 单位/次" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 可出行省外次数 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="可出行省外次数 单位/年" prop="outProvinceYear">
              <el-input v-model="form.outProvinceYear" placeholder="可出行省外次数 单位/年" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可出行省外次数 单位/次" prop="outProvinceNum">
              <el-input v-model="form.outProvinceNum" placeholder="可出行省外次数 单位/次" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 可出行国外次数 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="可出行国外次数 单位/年" prop="abroadYear">
              <el-input v-model="form.abroadYear" placeholder="可出行国外次数 单位/年" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可出行国外次数 单位/次" prop="abroadNum">
              <el-input v-model="form.abroadNum" placeholder="可出行国外次数 单位/年" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 入职时间限制 -->
        <el-form-item label="入职时间限制，单位/年" prop="rzsjLimit">
          <div style="display: flex; align-items: center;">
            <el-tooltip effect="dark" content="用于限制新入职老师报名，即入职多少年后可报名" placement="top">
              <i class="el-icon-question" style="margin-right: 10px;"></i>
            </el-tooltip>
            <el-input v-model="form.rzsjLimit" placeholder="入职时间限制" />
          </div>
        </el-form-item>

        <!-- 是否重置报名限制 -->
        <el-form-item label="是否重置报名限制" prop="needRe0">
          <el-tooltip effect="dark" content="清除以前教职工报名次数，解除限制，全部重新计算" placement="top">
            <i class="el-icon-question" style="margin-right: 10px;"></i>
          </el-tooltip>
          <span style="margin-right: 10px;">
            <el-radio-group v-model="form.needRe0">
              <el-radio label="0" border>重置</el-radio>
              <el-radio label="1" border>不重置</el-radio>
            </el-radio-group>
          </span>
        </el-form-item>

        <!-- 政策实施时间 -->
        <el-form-item v-if="form.needRe0 === '1'" label="政策实施年份" prop="newCalculateYear">
          <div style="display: flex; align-items: center;">
            <el-tooltip effect="dark" content="新政策实施时间，若选择重置后，设定失效" placement="top" style="margin-right: 10px;">
              <i class="el-icon-question"></i>
            </el-tooltip>
            <!-- 修改 v-model 以绑定到 form.newCalculateYear -->
            <el-date-picker v-model="form.newCalculateYear" type="year" placeholder="选择年份" format="yyyy" editable="true"
              :year.sync="form.newCalculateYear" @change="handleYearChange"> <!-- 添加 year 属性绑定 -->
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dia log-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPolicy, getPolicy, updatePolicy } from "@/api/lxy/policy";
import { reset } from "@/api/lxy/selectUser";

export default {
  name: "Policy",
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 政策表格数据
      policyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        joinYear: [
          { required: true, message: "参与次数-年不能为空", trigger: "blur" }
        ],
        joinNum: [
          { required: true, message: "参与次数-次不能为空", trigger: "blur" }
        ],
        outProvinceYear: [
          { required: true, message: "省外-年不能为空", trigger: "blur" }
        ],
        outProvinceNum: [
          { required: true, message: "省外-次不能为空", trigger: "blur" }
        ],
        abroadYear: [
          { required: true, message: "国外-年不能为空", trigger: "blur" }
        ],
        rzsjLimit: [
          { required: true, message: "入职时间限制不能为空", trigger: "blur" }
        ],
        needRe0: [
          { required: true, message: "是否重置报名限制不能为空", trigger: "blur" }
        ],
        newCalculateYear: [
          { required: true, message: "政策实施时间不能为空", trigger: "blur" }
        ]



      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleYearChange(date) {
      // 将日期对象中的年份提取出来并更新到 form.newCalculateYear
      this.form.newCalculateYear = date.getFullYear().toString();
    },

    /** 查询政策列表 */
    getList() {
      this.loading = true;
      this.reset();
      const id = 1
      getPolicy(id).then(response => {
        this.loading = false;
        this.form = response.data;
      });
      // listPolicy(this.queryParams).then(response => {
      //   this.policyList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
      // this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        joinYear: undefined,
        joinNum: undefined,
        outProvinceYear: undefined,
        outProvinceNum: undefined,
        abroadYear: undefined,
        abroadNum: undefined,
        inOutProportion: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        rzsjLimit: undefined,
        needRe0: undefined,
        newCalculateYear: undefined
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      // this.reset();
      const id = 1
      getPolicy(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改政策";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.needRe0 === '0') {
            // 如果选择重置，弹出提示框
            this.$confirm('选择重置后不可恢复，是否继续？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(() => {
                // 用户点击确定，执行提交操作
                this.buttonLoading = true;
                if (this.form.id != null) {
                  updatePolicy(this.form).then((response) => {
                    this.$modal.msgSuccess('修改成功');
                    this.open = false;
                    this.getList();
                  }).finally(() => {
                    this.buttonLoading = false;
                  });
                }
              })
              .catch(() => {
                // 用户点击取消，不执行提交操作
              });
          } else {
            // 如果不选择重置，直接执行提交操作
            this.buttonLoading = true;
            if (this.form.id != null) {
              updatePolicy(this.form).then((response) => {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        }
      });
    },
  }
};
</script>
